{% extends "pages/auth/_layout.html" %}
{% from "components/auth_macros.html" import auth_banner %}

{% block title %}Verify your email - {{ project_name }}{% endblock %}

{% block auth_form %}
<div x-data="verifyPending()">
  <h1 class="text-2xl font-semibold text-white mb-2">Verify your email</h1>
  <p class="text-sm text-aegis-muted mb-8">
    We sent a link to
    {% if user %}<span class="text-white">{{ user.email }}</span>{% else %}your inbox{% endif %}.
    Open it to finish setting up your account.
  </p>

  <div class="space-y-4">
    {{ auth_banner("sent", tone="ok") }}
    {{ auth_banner("error") }}

    <button type="button" @click="resend()" :disabled="loading"
      class="text-sm text-white border border-aegis-teal bg-aegis-teal/10 rounded px-5 py-2.5 hover:bg-aegis-teal/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
      <span x-show="!loading">Resend the link</span>
      <span x-show="loading" x-cloak>Sending…</span>
    </button>
  </div>
</div>

<script>
function verifyPending() {
  return {
    loading: false,
    error: '',
    sent: '',

    async resend() {
      this.loading = true;
      this.error = '';
      this.sent = '';
      let resp;
      try {
        resp = await fetch('/api/v1/auth/resend-verification', {
          method: 'POST',
          credentials: 'same-origin',
        });
      } catch (_) {
        this.loading = false;
        this.error = 'Could not reach the server. Try again.';
        return;
      }
      this.loading = false;
      if (resp.ok) {
        this.sent = 'Sent. Check your inbox.';
        return;
      }
      this.error = 'Could not send right now. Try again shortly.';
    },
  };
}
</script>
{% endblock %}

{% block auth_footer %}
Wrong account? <a href="/logout" class="text-aegis-teal hover:text-white transition-colors">Sign out</a>.
{% endblock %}